<template>
	<view class="mydetail-body">
		
		<view class="tn-safe-area-inset-bottom tn-margin-bottom-sm" v-if="tongzhiList.length">
			<view class="tn-border-solid-bottom" v-for="(item,index) in tongzhiList" :key="index">
		      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
				    <view class="justify-content-item logo-pic">
				      <view class="logo-image">
				  		<text class="tn-icon-image-text" style="font-size: 52rpx;"></text>
				      </view>
				    </view>
		        <view class="justify-content-item tn-flex-1">
		          <view class="">
		            <view class="tn-padding-right tn-color-black" @touchend="goDetailPage(item)">
		              <view class="tn-padding-right tn-text-ellipsis tn-padding-left-sm tn-text-sm">
		                <view class="tn-color-grey content-text-view">{{item.lastMessage.content}}</view>
		              </view>
		              <view class="tn-padding-right tn-padding-top tn-padding-left-sm tn-text-sm tn-flex tn-flex-row-between">
		                <view class="justify-content-item">
		                	{{item.name}}
		                </view> 
						<view class="tn-text-right justify-content-item">{{item.lastMessage.messageTime}}</view>
		              </view>
		            </view>
		          </view>
		        </view>
		        <view class="justify-content-item">
		          <view class="tn-flex tn-flex-row-right">
					  <text class="tn-icon-delete" style="color: red; font-size: 38rpx;" @touchend="deleteTongzhi(item)"></text>
		          </view>
		        </view>
				
				<!-- <tn-badge v-if="item.isNewMessage" backgroundColor="rgba(249, 94, 90, 1)" :dot="true" :radius="20" :top="45" :absolute="true" :right="45"></tn-badge> -->
		      </view>
			</view>
		</view>
		
		<view class=" tn-flex tn-flex-row-center fullhouse" v-else>
			<tn-empty mode="data" text="暂无留言"></tn-empty>
		</view>
	<!-- <tn-button class="fabu__btn" width="100rpx" height="100rpx" backgroundColor="tn-cool-bg-color-7" :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="gofabu"><text class="tn-icon-edit-form"></text></tn-button> -->
		
		<tn-popup
		  v-if="isshowPOP"
		  v-model="showpopup"
		  length="50%"
		  mode="center"
		  backgroundColor="#ffffff"
		  width="80%"
		  height="50%"
		  :borderRadius="10"
		  @close="closedPopup"
		>
		  <view class="popup-content ">
			  <view class="tongzhi-pop-content tn-padding">
				  <view class="pop-item tn-margin-bottom-sm tn-border-solid-bottom tn-padding-bottom-sm" v-for="(item, index) in msgList" :key="index">
				  	<view class="tn-text-bold tn-padding-bottom-sm">
				  		{{item.isMySend?'我':item.parentName}}
				  	</view>
					<view class="">
						{{item.content}}
					</view>
					<view class="">
						{{item.messageTime}}
					</view>
				  </view>
			  </view>
			  <view class="pop-input-view tn-padding-left-sm tn-padding-right-sm">
			  	
			  	<view class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="justify-content-item ">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<tn-input class="" type="text" v-model="huifuStr" placeholder="请输入" border></tn-input>
						</view>
					</view>
					<view class="justify-content-item ">
						<view class="tn-flex tn-flex-col-center tn-flex-row-right">
							<tn-button shape="round" @click="fasongliuyan()" :disabled="!huifuStr.length" :backgroundColor="huifuStr.length?'#01BEFF':'#D8E5FF'" fontColor="#ffffff">发送</tn-button>
						</view>
					</view>
			  	</view>
			  </view>
		    <tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="220rpx" backgroundColor="#01BEFF" fontColor="#ffffff">关闭弹窗</tn-button>
		  </view>
		</tn-popup>
		
			<tn-toast
			  ref="toast"
			></tn-toast>
	</view>
</template>

<script>
	
		export default {
			name: 'liuyan',
			data(){
				return {
					avatarUrl: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
					tongzhiList: [],
					options: [
					  {
						icon: 'delete',
						style: {
						  backgroundColor: '#E83A30',
						  width: '80rpx',
						  height: '80rpx',
						  margin: '0 12rpx',
						  borderRadius: '100rpx'
						}
					  }
					],
					showpopup: false,
					isshowPOP: true,
					msgList: [1,2,3,4,5],
					huifuStr: '',
					totalPage: 1,
					pageIndex: 1,
					currentConversation: null,
				}
			},
			mounted() {
				this.getLiulan();
			},
			methods:{
				deleteTongzhi(item){
					console.log(item)
					this.request({
						url: '/Conversation/Delete?conversationId='+item.conversationId,
						method: 'post',
					}).then(res => {
						if(res.code == 200){
							this.getLiulan();
						}
					})
				},
				gofabu(){
					uni.navigateTo({
						url:'/pages/my/fabutongzhi'
					})
				},
				closedPopup(){
					console.log('关闭弹框-------------')
					this.showpopup = false;
					this.isshowPOP = false;
					this.$nextTick(() => {
						this.isshowPOP = true;
						this.currentConversation = null;
					})
				},
				showDetail(item){
					this.request({
						url: '/Conversation/History',
						method: 'get',
						params: {
							conversationId: item.conversationId
						}
					}).then(res => {
						if(res.code == 200){
							this.msgList = res.data;
							this.showpopup = true;
							this.currentConversation = item;
						}else{
							this.$refs.toast.show({
							  title: '',
							  content: '读取错误，请退出重试',
							  icon: '',
							  image: '',
							  duration: 1000
							})
						}
					})
				},
				fasongliuyan(){
					console.log('this.huifuStr =========== ',this.huifuStr)
					
					this.request({
						url: '/Conversation/Send',
						method: 'post',
						params: {
							conversationId: this.currentConversation.conversationId,
							targetId: this.currentConversation.targetId,
							content: this.huifuStr
						}
					}).then(res => {
						if(res.code == 200){
							this.huifuStr = '';
							this.showDetail(this.currentConversation);
						}
					})
				},
				getLiulan(){
					
					this.request({
						url: '/Conversation/List',
						method: 'get',
					}).then(res => {
						if(res.code == 200){
							this.tongzhiList = res.data;
						}
					})
				},
				goDetailPage(item){
					
						uni.setStorageSync('liuyanDetail', item)
						uni.navigateTo({
							url: '/pages/my/liuyanDetail'
						})
				},
			},
		}
</script>

<style lang="scss" scoped>
	.mydetail-body{
			  overflow-y: auto;
	}
	.tn-swipe-action-item{
		border-bottom: 1px solid #dddddd;
	}
  .fabu__btn{
	  position: fixed;
	  bottom: 30%;
	  right: 10px;
  }
  .popup-content{
	  position: relative;
	  height: 100%;
  }
  .tongzhi-pop-content{
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 200rpx;
	  overflow-y: auto;
  }
  .opo-bottom-btn{
	  position: absolute;
	  bottom: 20rpx;
	  left: 50%;
	  margin-left: -100rpx;
  }
  .pop-item{
	  font-size: 14px;
  }
  .pop-input-view{
	position: absolute;
	width: 100%;
	bottom: 100rpx;
  }
  .content-text-view{
	  display: inline-block;
	      max-width: 200px;
	      text-overflow: ellipsis;
	      overflow: hidden;
	      white-space: nowrap;
  }
</style>